<div class="content-wrapper">
    <!-- Content Header (Page header) -->

    <style>
        .productGoodsList td div{
            width: 100%;
            min-height: 20px;
        }
    </style>
    
    <section class="content">
        
    	<div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">订单列表</h3>
            </div>
            
            <table class="table table table-striped table-hover table-bordered table-condensed productGoodsList">
                <thead>
                    <tr>
                        <th>商品型号</th>
                        <th>中文品名</th>
                        <th>（SHIPMENT ID)</th>
                        <th>亚马内部编号</th>
                        <th>数量</th>
                        <th>实发</th>
                        <th>pcs/箱</th>
                        <th>箱数</th>
                        <th>重/pcs</th>
                        <th>净重</th>
                        <th>净重小计</th>
                        <th>毛重</th>
                        <th>毛重小计</th>
                        <th>箱长mm</th>
                        <th>箱宽mm</th>
                        <th>箱高mm</th>
                        <th>小计体积m³</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div>8615</div>

                        </td>
                        <td>
                            <div>8615彩窗110片</div>
                        </td>
                        <td>
                            <div data-action="edit">FBA15XC4YMD2</div>
                        </td>
                        <td>
                            <div data-action="edit">11GPFFCR</div>
                        </td>
                        <td>
                            <div data-action="edit">96</div>
                        </td>
                        <td>
                            <div data-action="edit">96</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="weight">6</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="weight|bulk">16</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="weight">3.71</div>
                        </td>
                        <td>
                            <div>22.26</div>
                        </td>
                        <td>
                            <div>356.16</div>
                        </td>
                        <td>
                            <div data-action="edit">23.26</div>
                        </td>
                        <td>
                            <div data-action="edit">372.16</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="bulk">48.5</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="bulk">38.5</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="bulk">35</div>
                        </td>
                        <td>
                            <div>1.05</div>
                        </td> 
                    </tr>
                </tbody>
            </table>
            <div class="text-center">
                <button class="btn btn-info addRow">添加一行</button>
            </div>
            <br />
            
        </div>
    </section>

    <script>
        $(function(){
            var COL = {
                PCS: 7,
                PCS_WEIGHT: 9,
                BOX_TOTAL: 8,
                PCS_WEIGHT_TOTAL : 10,
                WEIGHT_TOTAL: 11,
                BOX_LENGTH: 14,
                BOX_WIDTH: 15,
                BOX_HEIGHT: 16,
                BOX_BULK: 17
            };


            
            function runCallback(dom, flag){
                var funs = flag.split('|');
                var tr = dom.closest('tr');
                
                var getV = function(num){
                    return tr.find('td').eq(num - 1).find('div').html();
                }
                var getT = function(num) {
                    return tr.find('td').eq(num-1).find('div');
                }
                if(funs.includes('weight')) {
                    getT(COL.PCS_WEIGHT_TOTAL).html((getV(COL.PCS) * getV(COL.PCS_WEIGHT)).toFixed(2));
                    getT(COL.WEIGHT_TOTAL).html((getV(COL.PCS) * getV(COL.PCS_WEIGHT) * getV(COL.BOX_TOTAL)).toFixed(2));
                }
                if(funs.includes('bulk')){
                    getT(COL.BOX_BULK).html((getV(COL.BOX_LENGTH) * getV(COL.BOX_WIDTH) * getV(COL.BOX_HEIGHT) * getV(8) / 1000000).toFixed(2))
                }
            }

            $('.addRow').on('click', function(){
                let tr = `<tr>
                        <td>
                            <div></div>

                        </td>
                        <td>
                            <div></div>
                        </td>
                        <td>
                            <div data-action="edit"></div>
                        </td>
                        <td>
                            <div data-action="edit"></div>
                        </td>
                        <td>
                            <div data-action="edit">0</div>
                        </td>
                        <td>
                            <div data-action="edit">0</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="weight">0</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="weight|bulk">0</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="weight">0</div>
                        </td>
                        <td>
                            <div>0</div>
                        </td>
                        <td>
                            <div>0</div>
                        </td>
                        <td>
                            <div data-action="edit">0</div>
                        </td>
                        <td>
                            <div data-action="edit">0</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="bulk">0</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="bulk">0</div>
                        </td>
                        <td>
                            <div data-action="edit" data-callback="bulk">0</div>
                        </td>
                        <td>
                            <div>0</div>
                        </td> 
                    </tr>`;
                    $(tr).appendTo($('tbody'));
            })
            $('tbody').on('click', '[data-action=edit]', function(){
                let dom = $(this);
                $(this).attr('contenteditable', true).focus();
                dom.on('blur',function(){
                    $(this).removeAttr('contenteditable');
                    if($(this).data('callback')) {
                        runCallback(dom, $(this).data('callback'));
                    }
                })
                dom.on('keydown', function(e){
                    if(e.which == 13 || e.which == 27) {
                        dom.trigger('blur');
                        return false;
                    }
                    
                })
            })
        })
    </script>

    
</div>